<section type="info" label="INFO"
         contextHelp="In this section you can easily edit the Summary and Description of the Path Item."
         [collaborationNodePath]="pathInfoPaths()"
         [validationModels]="[path]" [validationProperties]="['description']" [validationShallow]="true">
    <span actions></span>
    <div body>
        <!-- Summary -->
        <div class="section-field-label">
            <validation-problem [model]="path" [shallow]="true" [property]="'summary'"></validation-problem>
            <span>Summary</span>
        </div>
        <div class="section-field summary">
            <pf-inline-text-editor [value]="path.summary" [noValueMessage]="'No Summary'"
                                   [labelClass]="'api-item-title'"
                                   [inputClass]="'api-item-editor api-summary-editor api-item-title'"
                                   [baseNode]="path" nodePath="summary"
                                   (onChange)="changeSummary($event)"></pf-inline-text-editor>
        </div>

        <!-- Description -->
        <div class="section-field-label">
            <validation-problem [model]="path" property="description" [shallow]="true"></validation-problem>
            <span>Description</span>
        </div>
        <div class="section-field description">
            <inline-markdown-editor [value]="path.description"
                                    [labelClass]="'api-path-description api-item-description'"
                                    [formClass]="'api-path-description-editor-form'"
                                    [inputClass]="'api-item-editor api-description-editor api-path-description api-item-description'"
                                    [baseNode]="path" nodePath="description"
                                    [noValueMessage]="'No description.'" (onChange)="changeDescription($event)"></inline-markdown-editor>
        </div>
    </div>
</section>
